;(function ($) {

  $.fn.dialog = function(option) {
    return this.each(function() {
      var $this = $(this);
      if (option === 'hide') {
        $('body').css('overflow', 'auto');
        $('.backdrop').hide();
        $this.hide();
        return;
      }
      if (!$('.backdrop').length) {
        $('<div />').addClass('backdrop').css({
          'position': 'fixed',
          'z-index': 999999,
          'top': 0,
          'right': 0,
          'bottom': 0,
          'left': 0,
          'display': 'none',
          'background-color': 'rgba(0,0,0,.3)',
        }).on('click', function () {
          $(this).hide();
          $this.hide();
          $('body').css('overflow', 'auto');
        }).appendTo('body');
      }
      if (option === 'show') {
        $('body').css('overflow', 'hidden');
        $('.backdrop').show();
        $this.show();
      }

      var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

      $(this).css({
        'position': 'fixed',
        'z-index': 1000000,
        'width': w - 40,
        'border-radius': '6px',
        'padding-top': '20px',
        'left': '20px',
        'bottom': '20%',
        'background-color': '#ffffff',
        'border-top': 'solid 1px #ccc',
        'box-shadow': '0px -5px 7px 0px rgba(0, 0, 0, 0.1)',
      });

      $(this).find('.dialog-title').css({
        'text-align': 'center',
        'font-size': '14px',
        'font-weight': 'bold',
      });

      $(this).find('.dialog-body').css({
        'width': '90%',
        'max-height': h - 200,
        'overflow': 'auto',
        'margin': '10px auto',
      });

      $(this).find('.dialog-foot').css({
        'font-size': '14px',
        'line-height': '40px',
        'text-align': 'center',
        'border-top': '1px solid rgba(0, 0, 0, 0.1)',
        'width': '90%',
        'margin': '0 auto',
      });
    });
  };

})(jQuery)
